<template>
    <div>
        <h2>{{ str }}</h2>
        <h2>{{ num }}</h2>

        <input type="button" value="修改num值" v-on:click="fn">
        <input type="button" value="修改num值" @click="fn1">


        <table>
            <tbody>
                <tr>
                    <td>Id</td>
                    <td>Name</td>
                    <td>Sex</td>
                </tr>
                <tr v-for="item in objArr" :Key="item.id">
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.sex }}</td>
                </tr>
            </tbody>
        </table>

        <select>
            <option value="">-请选择-</option>
            <option v-bind:value="item.id" v-for="item in address">{{ item.name }}</option>
        </select>
    </div>
</template>

<script setup lang="ts"> 
import { ref } from 'vue';
let str = ref('好好学习 天天向上');
let num = ref(100);

const fn1=() =>{
    num.value++;
}

const fn=()=>{
    str.value="good good study ,day day up";
}

let objArr=[{id:1,name:"张三",sex:"男"},{id:2,name:"王老五",sex:"男"},{id:3,name:"李四",sex:"女"}];

let address=[{id:1,name:"黑龙江"},{id:1,name:"吉林"},{id:1,name:"辽宁"}]

</script>
<style scoped>

</style>